<style>
    .error {color : red}
    #select1,#select2,#button-top-bottom{
        height:400px;
    }
    #top {
        margin-top: 155px;
    }
    #bottom {
        margin-top: 20px;
    }
</style>
<div class="container-fluid p-t-10">
  <ol class="breadcrumb" style="font-weight: 700;margin-bottom: 10px">
    <li><a href="#">权限组管理</a></li>
    <li class="active">新增权限组</li>
  </ol>
  <div class="row">
    <div class="col-lg-12">
      <div class="card">

        <div class="card-body">
          <h1>权限组选择节点</h1>
          <form id="add-form" action="" method="post" class="row">
            <div class="form-group col-md-12 ">
              <label for="id">权限组编号</label>
              <input type="text" class="form-control" id="id" name="id" readonly value="{$data? $data.id:''}"/>
            </div>

            <div class="form-group col-md-12">
              <label for="group_name">权限组名称</label>
              <input type="text" readonly class="form-control" id="group_name" name="group_name" value="{$data? $data.group_name:''}" placeholder="请输入权限组名称 例如: 权限组管理" />
            </div>


            <div class="col-md-12 m-t-15">
                <div class="form-group col-md-4 col-md-offset-1">
                    <div class="form-group col-md-8 ">
                        <input type="text"  class="form-control" id="select1-input" value="" placeholder="请输入联想关键字" />
                    </div>
                    <div class="form-group col-md-4">
                        <button class="btn btn-purple btn-w-md" type="button" onclick="ddd()">重置</button>
                    </div>
                    <div class="form-group col-md-12 ">
                        <label for="select1" ">待选择节点</label>
                        <select class="form-control" id="select1" name="select1" multiple="">
                        </select>
                    </div>
                </div>

                <div id="button-top-bottom" class="form-group col-md-1">
                    <button id="top" class="btn btn-pink btn-w-md" type="button">&gt;&gt;</button>
                    <button id="bottom" class="btn btn-yellow btn-w-md" type="button">&lt;&lt;</button>
                </div>

                <div class="form-group col-md-4  m-t-15">
                    <label for="select2" style="margin-top: 32px;">已选择节点</label>
                    <select class="form-control " id="select2" name="select2"  multiple="">
                        {foreach  $paths as $key=>$val}
                        <option value="{$val['id']}">{$val['path_name']}-{$val['path']}</option>
                        {/foreach}
                    </select>
                </div>

            </div>




          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script>

  $(function(){
      var group_id = '{$data.id}';

      window.ddd = function ddd(){
          $('#select1-input').val('');
          $('#select1').html('');
      };
      $('#select1-input').on('input',function(){
          var text = $(this).val();
          if(text && text!=='/'){
              $._ajax({
                  url:'/path/searchGroupPath',
                  data:{
                      group_id : $('#id').val(),
                      path: text
                  }
              }).done(function(data){
                  if(data){
                      var html = '';
                      data.forEach(function(val){
                          html += '<option value="'+val.id+'">'+val.path_name+'-'+val.path+'</option>';
                      });
                      $('#select1').html(html);
                  }
              });
          }
      })

      /**
       * 添加节点
       * @param group_id
       * @param path_id
       * @param callback
       */
      function addGroupPath(path_id,callback){
          $._ajax({
              url:'/roleGroup/addGroupPath',
              data:{
                  group_id : group_id,
                  path_id: path_id
              }
          }).done(function(data){
              callback(data)
          });
      }

      /**
       * 删除节点
       * @param group_id
       * @param path_id
       * @param callback
       */
      function delGroupPath(path_id,callback){
          $._ajax({
              url:'/roleGroup/delGroupPath',
              data:{
                  group_id : group_id,
                  path_id: path_id
              }
          }).done(function(data){
              callback(data)
          });
      }

      //双击左侧添加
      $('#select1').on('dblclick','option',function(){
          var $option = $(this);
          addGroupPath($option.attr('value'),function(data){
              if(data) {
                  $('#select2').append($option);
              }else{
                  lightyear.notify('请重试~', 'danger');
                  setTimeout(function() {
                      window.location.reload();
                  }, 1e3);
              }
          });
      });

      //双击右侧删除
      $('#select2').on('dblclick','option',function(){
          var $option = $(this);
          delGroupPath($option.val(),function(data){
              if(data) {
                  $('#select1').append($option);
              }else{
                  lightyear.notify('请重试~', 'danger');
                  setTimeout(function() {
                      window.location.reload();
                  }, 1e3);
              }
          });
      });

      $('#top').click(function(){
          $('#select1 option:selected').each(function(){
              var $option = $(this);
              addGroupPath($option.val(),function(data){
                  if(data) {
                      $('#select2').append($option);
                  }else{
                      lightyear.notify('请重试~', 'danger');
                      setTimeout(function() {
                          window.location.reload();
                      }, 1e3);
                  }
              });
          })
      });

      $('#bottom').click(function(){
          $('#select2 option:selected').each(function(){
              var $option = $(this);
              delGroupPath($option.val(),function(data){
                  if(data) {
                      $('#select1').append($option);
                  }else{
                      lightyear.notify('请重试~', 'danger');
                      setTimeout(function() {
                          window.location.reload();
                      }, 1e3);
                  }
              });
          })
      })


  });
</script>


